
const { resolve } = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = {
    entry: "./index.js",
    output: {
        path: resolve(__dirname, "build"),
        filename: "build.js"
    },
    module: {
        rules: [
            {

            }
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: "./index.html"
        })
    ],
    mode: "development",

    // 开发服务器 devserver: 用来自动化(自动编译，自动打开浏览器，自动刷新浏览器等)
    // 只会在内存中编译打包，不会有任何的输出
    // 启动指令为:webpack-dev-server （本地安装的时候 其不是全局指令 因此需要使用npx webpack-dev-server来启动）
    devServer: {
        // 运行项目的目录
        contentBase: resolve(__dirname, "PP"),
        // 监视contentBase目录下的所有文件,一旦有文件变化，就会reload
        watchContentBase: true,
        watchOptions: {
            //  忽略文件 
            ignore: /node_modules/
        },
        // 启动GZIP压缩
        compress: true,
        // 域名
        host: "localhost",
        // 启动服务器的端口号
        port: 3000,
        // 自动打开默认浏览器
        open: true,
        // 开启热模块
        hot: true,
        // 不显示启动服务器日志信息
        clientLogLevel: "none",
        // 除了一些基本启动信息外，其他内容不需要显示
        quiet: true,
        // 如果出现错误，不要全屏提示
        overlay: false,
        // 服务器代理 ---> 解决开发环境下跨域的问题
        proxy: {
            // 一旦服务器devServer（5000）接收到 /api/xxx 的请求，就会把请求转发到另一个服务器（3000）
            "./api": {
                target: "http://localhost:3000",
                // 发送请求时 请求路径重写 /api/xxx ---> /xxx
                pathRewrite: {
                    "^/api": ""
                }
            }
        }

    }
}